<script setup lang="ts">
import { ref } from 'vue'
import type { SelectProps } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';

const optionsLanguage:any =ref<SelectProps['options']>([
  {
    value: 'zhCN',
    label: '中文简体',
  },
  {
    value: 'enGB',
    label: 'English',
  },
])
const optionsTheme:any = ref<SelectProps['options']>([
  {
    value: 'system',
    label: '系统',
  },
  {
    value: 'Dark',
    label: '深色',
  },
  {
    value: 'Light',
    label: '浅色',
  },
])
console.log()
const valueLanguage = ref('中文简体')
const valueTheme = ref('系统')
const handleChangeLanguage = (item:any) => {
  console.log(item)
}
const handleChangeTheme = (item:any) => {
  console.log(item)
}
const showConfirm = () => {
  Modal.confirm({
    title: '您确定要注销账号吗?',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode('div', { style: 'color:red;' }, '一经注销，再无反悔'),
    async onOk() {
      try {
        return await new Promise((resolve, reject) => {
          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
        });
      } catch {
        return console.log('Oops errors!');
      }
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
};
</script>

<template>
  <a-row>
    <a-col span="24" class="col-sys">
      <a-space>
        <span>语言设置</span>
        <a-select
            v-model:value="valueLanguage"
            :options="optionsLanguage"
            placement="bottomLeft"
            style="width: 200px"
            @change="handleChangeLanguage"
        >
        </a-select>
      </a-space>
    </a-col>
    <a-col span="24" class="col-sys">
      <a-space>
        <span>主题切换</span>
        <a-select v-model:value="valueTheme"
                  :options="optionsTheme"
                  placement="bottomLeft"
                  style="width: 200px"
                  @change="handleChangeTheme"
        >
        </a-select>
      </a-space>
    </a-col>
  </a-row>
  <a-divider>关于账户</a-divider>
  <div class="flex-center">
    <a-button type="primary" @click="showConfirm">注销账户</a-button>
  </div>
</template>

<style scoped lang="scss">
 .col-sys{
   margin-bottom: 0.7rem;
   width: 100%;
 }
</style>